<template>
  <div class="feedback-page">
    <van-form @submit="onSubmit" class="feedback-form">
      <van-cell-group inset>
        <!-- 反馈类型选择 -->
        <van-field name="feedbackType" label="反馈类型">
          <template #input>
            <van-radio-group v-model="form.type" direction="horizontal">
              <van-radio 
                v-for="option in typeOptions" 
                :key="option.value" 
                :name="option.value"
              >
                {{ option.text }}
              </van-radio>
            </van-radio-group>
          </template>
        </van-field>
        
        <!-- 联系方式 -->
        <van-field
          v-model="form.contact"
          label="联系方式"
          placeholder="请输入手机/邮箱(选填)"
        />
        
        <!-- 反馈内容 -->
        <van-field
          v-model="form.content"
          rows="5"
          autosize
          label="反馈内容"
          type="textarea"
          maxlength="500"
          placeholder="请详细描述您的问题或建议"
          show-word-limit
          :rules="[{ required: true, message: '请填写反馈内容' }]"
        />
        
        <!-- 提交按钮 -->
        <div style="margin: 16px;">
          <van-button 
            round 
            block 
            type="primary" 
            native-type="submit"
            :loading="loading"
            :disabled="loading"
          >
            {{ loading ? '提交中...' : '提交反馈' }}
          </van-button>
        </div>
      </van-cell-group>
    </van-form>

    <!-- 显示历史反馈信息 -->
    <div class="feedback-history" v-if="feedbackHistory.length > 0">
      <h3>历史反馈记录</h3>
      <div class="feedback-item" v-for="(item, index) in feedbackHistory" :key="index">
        <p><strong>类型：</strong>{{ getTypeText(item.type) }}</p>
        <p v-if="item.contact"><strong>联系方式：</strong>{{ item.contact }}</p>
        <p><strong>内容：</strong>{{ item.content }}</p>
        <p class="time"><strong>时间：</strong>{{ item.time }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from 'vant';

export default {
  data() {
    return {
      form: {
        type: '',
        contact: '',
        content: ''
      },
      typeOptions: [
        { text: '产品问题', value: 'product' },
        { text: '服务问题', value: 'service' },
        { text: '建议意见', value: 'suggestion' },
        { text: '其他问题', value: 'other' }
      ],
      loading: false,
      feedbackHistory: [] // 存储历史反馈记录
    };
  },
  methods: {
    // 提交表单
    async onSubmit(values) {
      console.log('Form submitted:', values);
      
      if (this.loading) return;
      
      try {
        this.loading = true;
        
        // 获取当前时间
        const now = new Date();
        const timeString = `${now.getFullYear()}-${now.getMonth()+1}-${now.getDate()} ${now.getHours()}:${now.getMinutes()}`;
        
        // 将反馈信息添加到历史记录中
        this.feedbackHistory.unshift({
          type: this.form.type,
          contact: this.form.contact,
          content: this.form.content,
          time: timeString
        });
        
        Toast.success('提交成功！');
        this.resetForm();
      } catch (error) {
        console.error('Error submitting feedback:', error);
        Toast.fail('提交失败，请稍后重试');
      } finally {
        this.loading = false;
      }
    },
    
    // 重置表单
    resetForm() {
      this.form = {
        type: '',
        contact: '',
        content: ''
      };
    },
    
    // 获取反馈类型文本
    getTypeText(typeValue) {
      const option = this.typeOptions.find(opt => opt.value === typeValue);
      return option ? option.text : '未知类型';
    }
  }
};
</script>

<style lang="less" scoped>
.feedback-page {
  min-height: 100vh;
  background-color: #f7f8fa;
  padding-bottom: 20px;
  
  .feedback-form {
    margin-top: 20px;
  }
  
  .feedback-history {
    margin: 20px;
    padding: 15px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    
    h3 {
      margin-bottom: 15px;
      color: #333;
      font-size: 16px;
    }
    
    .feedback-item {
      padding: 12px 0;
      border-bottom: 1px solid #eee;
      
      &:last-child {
        border-bottom: none;
      }
      
      p {
        margin: 5px 0;
        color: #666;
        font-size: 14px;
        
        strong {
          color: #333;
        }
      }
      
      .time {
        color: #999;
        font-size: 12px;
      }
    }
  }
}
</style>